<template>
	<view :class="$attrs">
		<view class="mb-8"><text class="text-bold">报名信息</text></view>
		<view class="radius-8 bg-default px-12 py-16">
			
		</view>
		<button v-if="!disable" class="h-48 flex center bg-white color-primary fs-16 border-primary radius-8" @click="showTooltip = true">
			<image class="w-14 h-14 mr-4" src="@/static/svg/publish/icon-add.svg"></image>
			<text>添加报名信息</text>
		</button>
		<view v-if="showTooltip" class="tooltip-popup fs-12">
			<view class="flex item-center h-22" @click="toAddFormItem(1)">
				<text>信息填写项</text>
				<image v-if="addType===1" class="w-16 h-16 ml-4" src="@/static/svg/publish/icon-selected.svg"></image>
			</view>
			<view class="flex item-center h-22 mt-8" @click="toAddFormItem(2)">
				<text>单选项</text>
				<image v-if="addType===2" class="w-16 h-16 ml-4" src="@/static/svg/publish/icon-selected.svg"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, unref, toRaw } from 'vue'
	
	const props = defineProps({
		modelValue: {
			type: Array
		},
		disable: {
			type: Boolean,
			default: false
		},
	})
	
	const emits = defineEmits(['update:modelValue'])
	
	const addType = ref(0)
	const showTooltip = ref(false)
	
	const toAddFormItem = (type) => {
		
	}
	
</script>

<style lang="scss" scoped>
	.tooltip-popup {
		position: relative;
		background: url('@/static/svg/publish/bg-tooltip.svg') no-repeat;
		background-size: 100%;
		height: 74px;
		width: 114px;
		padding-top: 14px;
		padding-left: 12px;
		padding-bottom: 8px;
	}
</style>